{% extends "./base.html" %}
{% load static %}

 {% block head %}
 <title>DeepNeural</title>
 <meta name="viewport" content="width=320,initial-scale=0.7" >
 <link type="text/css" href="{% static '/neural/styles.css' %}" rel="stylesheet">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Kadwa:wght@400;700&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kadwa:wght@400;700&display=swap" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
{% endblock %}

  {% block header %}
  <nav id="nav">
    <span class="nav-item title"><a href="{% url 'home' %}"><img id="logo" src="{% static '/neural/DeepNeural_Logo_Main.png'%}"></a></span>
    <!-- <span class="nav-item"><img class="logo" src="/static/deepneural/DeepNeural.png"></span> -->
    <div>
      <span class="nav-item"><a href="{% url 'predictive_models' %}">Predictive Models</a></span>
      <span class="nav-item"><a href="{% url 'deepneural_blog' %}">Blog</a></span>
    </div>
  </nav>
  <section id="header_box">
   <div id="banner_section">
    <h2>Seeking to bring about vast improvements in healthcare <b>
       and human biology.
    </h2>
    <p>
      Artificial intelligence has allowed humanity to reach the pinnacle of progress
      in various fields, ranging from text generation to object detection. However, AI, and
      more specifically, machine learning can be used to further improve healthcare and ensure
      humans become the healthiest we have ever been. 
    </p>
   </div>
 </section>
  {% endblock %}
 
  {% block content %}
  <main id="home_content">
     <section class="mission_section">
       <h2>Our Mission</h2>
       <p>
        DeepNeural seeks to revolutionize healthcare by using cutting-edge
        AI to accelerate diagnoses, enhance clinical decision-making,
        and support ongoing health management. Through innovative AI-driven
        solutions, we will contribute to advancements in medical robotics,
        drug discovery, and the promotion of human longevity, making these technologies
        accessible to healthcare professionals and patients alike. 
       </p>
       <i class="fa-solid fa-arrow-down size"></i>
     </section>
     
     <section id="information" class="information">
       <article class="products_info">
          <h2>The Vision of the Future</h2>
          <p>
            To create a future where AI-powered healthcare
            technologies, from diagnostics to medical robotics,
            are seamlessly integrated into the healthcare ecosystem,
            improving patient outcomes and extending human longevity.
            We envision a world where advanced health solutions are 
            universally accessible and pave the way for a healthier,
            longer life for all.
          </p>
       </article>
       <article class="products_info">
        <h2>Understanding the mission</h2>
        <div>
           <span class="nav-item"><button id="btn1" style="background-color: #fff;">Potential impact</button></span>
           <span class="nav-item"><button id="btn2">Who is this for?</button></span>
           <span class="nav-item"><button id="btn3">Our approach</button></span>
        </div>
        <p id="card_text">
          
        </p>
     </article>
     </section>
  </main>
  <section id="deepneural_models" class="deepneural_models">
    <article id="blogCard"  class="model_name_card card_one">
       <div class="symbol">
        <i class="fa-solid fa-book-open"></i>
       </div>
       <div class="model_info">
          <h2>Blog</h2>
          <p>
            Stay updated on DeepNeural's latest research and overall progress developments. 
          </p>
      </div>
    </article>
    <article id="modelsCard"  class="model_name_card card_one">
      <div class="symbol">
        <i class="fa-solid fa-square-binary"></i>
      </div>
      <div class="model_info">
        <h2>Predictive Models</h2>
        <p>
          Get access to DeepNeural's ML models and overall information.
        </p>
    </div>
    </article>
   </section>
   <script>
    const cardText = document.getElementById("card_text");
    const btn1 = document.getElementById("btn1");
    const btn2 = document.getElementById("btn2");
    const btn3 = document.getElementById("btn3");
    const blogCard = document.getElementById("blogCard");
    const modelsCard = document.getElementById("modelsCard");
    const cardData = document.getElementById("deepneural_models");

    function modelCard(option) {
      if (option === "blogCard") {
         window.location.href = "{% url 'deepneural_blog' %}";
      }
      else if (option === "modelsCard") {
       window.location.href = "{% url 'predictive_models' %}";
      }
    }

    blogCard.addEventListener("click", () => {
     modelCard("blogCard");
    });
    modelsCard.addEventListener("click", () => {
     modelCard("modelsCard");
    });

    
    // If the window size gets too small, change the cards to display vertical
    function switchModelCardToColumn(){
       if (window.innerWidth > 700) {
        cardData.style.flexDirection = "row";
       } else {
        cardData.style.flexDirection = "column";
       }
    }

    switchModelCardToColumn();

    window.addEventListener("resize", switchModelCardToColumn);

    cardText.textContent = `
       Machine learning algorithms have the ability
       to improve patient care, through means such as
       Computer Vision, NLP and classical predictive models
       for better patient care.  
    
    `

    const textOne = `
       Machine learning algorithms have the ability
       to improve patient care, through means such as
       Computer Vision, NLP and classical predictive models
       for better patient care.   
      `

    const textTwo = `
     DeepNeural's current focus is to develop
     machine learning models designed for assistive
     diagnostics, by focusing on tabular, natural language, 
     and vision-based models for classification and regression.
    `

    const textThree = `
     All good things must start small. Our approach aims to
     reflect that statement; most of our models will be released in
     phases, and will carefully keep in mind that healthcare requires
     robust and trustworthy data, allowing us to build similar models.
    `

    function changeInnerText(btnId) {
       if (btnId.srcElement.id == "btn1") {
         cardText.textContent = textOne;
         btn1.style.backgroundColor = "#fff";
         btn2.style.backgroundColor = "#D3D3D3";
         btn3.style.backgroundColor = "#D3D3D3";
       }

        if (btnId.srcElement.id == "btn2") {
         cardText.textContent = textTwo;
         btn1.style.backgroundColor = "#D3D3D3";
         btn3.style.backgroundColor = "#D3D3D3";
         btn2.style.backgroundColor = "#fff";
       }

       if (btnId.srcElement.id == "btn3") {
         cardText.textContent = textThree;
         btn1.style.backgroundColor = "#D3D3D3";
         btn2.style.backgroundColor = "#D3D3D3";
         btn3.style.backgroundColor = "#fff";
       }
    }



    btn1.addEventListener("click", changeInnerText);
    btn2.addEventListener("click", changeInnerText);
    btn3.addEventListener("click", changeInnerText);
  </script>
  {% endblock %}

  {% block footer %}
  <section class="company_info">
    <article class="info_cards">
       <h3>Stay Connected</h3>
       <span class="info_cards_span nav-item"><a class="anchor" href="https://x.com/DNeural76430">X</a></span>
       <span class="info_cards_span nav-item"><a class="anchor" href="https://www.linkedin.com/company/dneural">LinkedIn</a></span>
       <span class="info_cards_span nav-item"><a class="anchor" href="https://www.instagram.com/deep_neural/">Instagram</a></span>
       <span class="info_cards_span nav-item"><a class="anchor" href="https://www.facebook.com/DeepNeuralCorp/">Facebook</a></span>
       <!-- <span class="info_cards_span nav-item"><a class="anchor" href="#">YouTube</a></span> -->
    </article>
    <article class="info_cards">
      <h3>Check Out</h3>
      <span class="info_cards_span nav-item"><a class="anchor" href="{% url 'predictive_models' %}">Predictive Models</a></span>
      <span class="info_cards_span nav-item"><a class="anchor" href="{% url 'deepneural_blog' %}">Blog</a></span>
   </article>
  </section>
  <script src="https://kit.fontawesome.com/315c494b79.js" crossorigin="anonymous"></script>
  {% endblock %}